<template>
    <el-container class="dashboard-container">
        <el-aside class="sidebar">
            <div class="logo">学生管理系统</div>
            <el-menu router default-active="/dashboard/students" background-color="#304156" text-color="#fff"
                active-text-color="#409EFF" :collapse-transition="false" class="sidebar-menu">
                <el-menu-item index="/dashboard/students">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>学生管理</span>
                </el-menu-item>
                <el-menu-item index="/dashboard/subjects">
                    <el-icon>
                        <Reading />
                    </el-icon>
                    <span>考试管理</span>
                </el-menu-item>
                <el-menu-item index="/dashboard/scores">
                    <el-icon>
                        <List />
                    </el-icon>
                    <span>学生成绩</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container class="main-container">
            <el-header>
                <div class="header-content">
                    <div class="header-title">学生管理系统</div>
                    <div class="header-right">
                        <el-button type="danger" plain size="small" @click="handleLogout">
                            <el-icon>
                                <SwitchButton />
                            </el-icon>
                            <span>退出登录</span>
                        </el-button>
                    </div>
                </div>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { User, Reading, List, SwitchButton } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { authApi } from '@/api'

const router = useRouter()

const handleLogout = () => {
    ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            await authApi.logout()
            localStorage.removeItem('token') // 清除token
            ElMessage.success('退出成功')
            router.push('/login')
        } catch (error) {
            console.error('退出失败:', error)
        }
    }).catch(() => { })
}
</script>

<style scoped>
.dashboard-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    margin: 0;
    padding: 0;
}

.sidebar {
    position: relative;
    width: 200px !important;
    background-color: #304156;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.logo {
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background-color: #2b3a4a;
    width: 200px;
    flex-shrink: 0;
}

.sidebar-menu {
    flex: 1;
    width: 200px !important;
    border: none;
}

.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.el-header {
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    padding: 0 20px;
    flex-shrink: 0;
}

.header-content {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title {
    font-size: 18px;
    color: #333;
}

.header-right {
    display: flex;
    align-items: center;
}

.el-button [class*='el-icon']+span {
    margin-left: 6px;
}

.el-main {
    flex: 1;
    background-color: #f0f2f5;
    padding: 20px;
    overflow-y: auto;
}

:deep(.el-menu) {
    border-right: none !important;
}

:deep(.el-menu-item) {
    padding-left: 20px !important;
}

/* 滚动条样式 */
:deep(::-webkit-scrollbar) {
    width: 6px;
}

:deep(::-webkit-scrollbar-thumb) {
    background-color: #909399;
    border-radius: 3px;
}

:deep(::-webkit-scrollbar-track) {
    background-color: #f0f2f5;
}
</style>